<template>
  <div class="app-container">
    <!-- 搜索过滤栏 -->
    <div class="control-bar">
      <div class="left">
        <el-input
          v-model="searchInput"
          placeholder="搜索桌号/订单号"
          clearable
          style="width: 300px"
          @keyup.enter="filterPayments"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select
          v-model="filterStatus"
          placeholder="全部状态"
          clearable
          style="width: 120px; margin-left: 10px"
        >
          <el-option label="待支付" value="0" />
          <el-option label="已支付" value="1" />
          <el-option label="已退款" value="2" />
        </el-select>
        <el-button type="primary" @click="filterPayments">搜索</el-button>
      </div>
    </div>

    <!-- 支付记录表格 -->
    <el-table
      :data="filteredPayments"
      border
      stripe
      style="width: 100%; height: calc(100vh - 180px)"
    >
      <el-table-column prop="orderNo" label="订单号" min-width="200" align="center" />
      <el-table-column prop="table" label="桌号" min-width="120" align="center" />
      <el-table-column label="金额" min-width="140" align="center">
        <template #default="{row}">
          <span class="price">¥{{ row.amount.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" min-width="150" align="center">
        <template #default="{row}">
          <el-tag :type="paymentMethodStyle[row.method].type">
            {{ paymentMethodStyle[row.method].text }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="120" align="center">
        <template #default="{row}">
          <el-tag :type="paymentStatusStyle[row.status].type" effect="light">
            {{ paymentStatusStyle[row.status].text }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" min-width="180" align="center">
        <template #default="{row}">{{ formatTime(row.payTime) }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="240" align="center" fixed="right">
        <template #default="{row}">
          <el-button
            v-if="row.status === 0"
            type="primary"
            size="small"
            @click="openPaymentDialog(row)"
          >
            发起支付
          </el-button>
          <el-button
            v-if="row.status === 1"
            type="warning"
            size="small"
            @click="handleRefund(row)"
          >
            发起退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 支付对话框 -->
    <el-dialog
      v-model="showPaymentDialog"
      :title="`订单支付 - ${currentPayment.orderNo}`"
      width="500px"
    >
      <div class="payment-detail">
        <div class="detail-item">
          <span class="label">桌号：</span>
          <span class="value">{{ currentPayment.table }}</span>
        </div>
        <div class="detail-item">
          <span class="label">订单金额：</span>
          <span class="value price">¥{{ currentPayment.amount.toFixed(2) }}</span>
        </div>
        <el-divider />
        <el-form :model="paymentForm" label-width="80px">
          <el-form-item label="支付方式" required>
            <el-radio-group v-model="paymentForm.method">
              <el-radio label="cash">现金</el-radio>
              <el-radio label="alipay">支付宝</el-radio>
              <el-radio label="wechat">微信</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 支付宝支付按钮 -->
          <div v-if="paymentForm.method === 'alipay'" class="alipay-box">
            <el-button
              type="primary"
              size="large"
              class="alipay-btn"
              @click="handleAlipay"
            >
              <el-icon><svg-icon icon="alipay" /></el-icon>
              支付宝支付
            </el-button>
          </div>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="showPaymentDialog = false">取消</el-button>
        <el-button
          v-if="paymentForm.method !== 'alipay'"
          type="primary"
          @click="confirmPayment"
        >
          确认支付
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 状态样式配置
const paymentStatusStyle = {
  0: { text: '待支付', type: 'warning' },
  1: { text: '已支付', type: 'success' },
  2: { text: '已退款', type: 'info' }
}

const paymentMethodStyle = {
  cash: { text: '现金', type: '' },
  alipay: { text: '支付宝', type: 'primary' },
  wechat: { text: '微信', type: 'success' }
}

// 模拟支付数据
const payments = ref([
  {
    orderNo: '20231122001',
    table: 'A01',
    amount: 598.0,
    method: 'alipay',
    status: 1,
    payTime: '2023-11-22 18:45:30'
  },
  {
    orderNo: '20231122002',
    table: 'B03',
    amount: 328.5,
    method: 'cash',
    status: 0,
    payTime: null
  },
  {
    orderNo: '20231122003',
    table: 'C02',
    amount: 888.0,
    method: 'wechat',
    status: 1,
    payTime: '2023-11-22 19:15:12'
  }
])

// 响应式数据
const searchInput = ref('')
const filterStatus = ref('')
const showPaymentDialog = ref(false)
const currentPayment = reactive({})
const paymentForm = reactive({
  method: 'cash'
})

// 计算属性
const filteredPayments = computed(() => {
  return payments.value.filter(payment => {
    const matchSearch = payment.orderNo.includes(searchInput.value) ||
                      payment.table.toLowerCase().includes(searchInput.value.toLowerCase())
    const matchStatus = filterStatus.value !== ''
                      ? payment.status.toString() === filterStatus.value
                      : true
    return matchSearch && matchStatus
  })
})

// 方法
const formatTime = (timeStr) => {
  return timeStr ? new Date(timeStr).toLocaleTimeString('zh-CN') : '--'
}

const openPaymentDialog = (payment) => {
  Object.assign(currentPayment, payment)
  paymentForm.method = payment.method || 'cash'
  showPaymentDialog.value = true
}

const handleAlipay = () => {
  // 支付宝支付逻辑
  ElMessage.warning('支付宝支付功能待实现')
}

const confirmPayment = () => {
  const index = payments.value.findIndex(p => p.orderNo === currentPayment.orderNo)
  if (index > -1) {
    payments.value[index].status = 1
    payments.value[index].payTime = new Date().toISOString()
    ElMessage.success('支付成功')
    showPaymentDialog.value = false
  }
}

const handleRefund = (payment) => {
  ElMessageBox.confirm(`确定要退款 ${payment.orderNo} 订单？`, '退款确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    payment.status = 2
    ElMessage.success('退款申请已提交')
  })
}

const filterPayments = () => {
  // 过滤逻辑已在计算属性处理
}
</script>

<style scoped>
.payment-detail {
  padding: 0 20px;

  .detail-item {
    margin: 12px 0;
    font-size: 14px;

    .label {
      color: #606266;
    }

    .value {
      color: #303133;
      &.price {
        color: #f56c6c;
        font-weight: 600;
      }
    }
  }
}

.alipay-box {
  text-align: center;
  margin: 20px 0;

  .alipay-btn {
    background: #1677ff;
    border-color: #1677ff;
    padding: 12px 24px;

    &:hover {
      opacity: 0.9;
    }

    .el-icon {
      margin-right: 8px;
      font-size: 18px;
    }
  }
}

.price {
  color: #f56c6c;
  font-weight: 600;
}

:deep(.el-table) {
  .cell {
    padding: 0 8px;
  }

  .el-tag {
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
  }
}
</style>